<template>
    <div class="chat-window">

        <!-- <el-scrollbar height="calc(100vh - 300px)" label="chatList" @scroll="getScroll" ref="scrollRef"
            wrap-style="overflow-x:hidden;">
         

        </el-scrollbar> -->
        
        <div ref="scrollIdRef" id="scrollId" class="chat-window-box" @scroll="handleScroll" style="  height: calc(100vh - 300px);
        overflow:auto;">
            <div v-for="item in arr" :key="item.id" class="flex chat-li">
                <div v-if="item.type == 1" class="chat-head" :class="item.type == 1 ? 'head-left' : ''">
                    <img src="@/assets/img/chat2.png" style="width:30px;height:30px;" />

                </div>
                <div class="bubble" :class="item.type == 1 ? 'flex-left bubble-left' : 'flex-right bubble-right'">
                    <div class="b-text">{{ item.text }}</div>
                    <div class="b-data">{{ item.data }}</div>
                </div>
                <div v-if="item.type == 2" class="chat-head" :class="item.type == 2 ? 'head-right' : ''">
                    <img src="@/assets/img/chat1.png" style="width:30px;height:30px;" />
                    <div class="chat-name">{{ item.uid }}</div>
                </div>
            </div>
        </div>

    </div>
</template>
  
<script>
export default {
    props: {
        chatArr: {
            type: Array,
            default: function () {
                return [
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },


                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },

                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },

                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },

                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },

                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },

                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },

                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },

                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },

                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },

                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },

                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },

                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },

                    {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    }, {
                        id: 2,
                        name: '小黑',
                        text: '你好啊！小白！',
                        data: '2023-10-23 19:24:50',
                        type: 2,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },
                    {
                        id: 1,
                        name: '小白',
                        text: '你好！',
                        data: '2023-10-23 19:23:24',
                        type: 1,
                        uid: 1001,
                    },

                ];
            },
        },
    },
    data() {
        return {
            arr: [],
        }
    },
    mounted() {
        this.arr = this.chatArr

    },
    computed: {

    },
    methods: {
        send(text) {
            const data = {
                id: 2,
                name: "小黑",
                data: this.getDate(),
                type: 2,
                text: text,
                uid: 1001,
            }
            this.addDataToArr(data)
        },
        getDate() {
            const currentDate = new Date();
            const year = currentDate.getFullYear();
            const month = this.padZero(currentDate.getMonth() + 1);
            const day = this.padZero(currentDate.getDate());
            const hours = this.padZero(currentDate.getHours());
            const minutes = this.padZero(currentDate.getMinutes());
            const seconds = this.padZero(currentDate.getSeconds());
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        padZero(value) {
            return value < 10 ? `0${value}` : value;
        },

        addDataToArr(newData) {
            // 添加数据到 arr 数组
            this.arr.push(newData);

            // 更新完数据后，手动滚动到底部
            this.$nextTick(() => {
                this.scrollToBottom();
            });
        },
        scrollToBottom() {
            // 使用 $refs 获取到滚动容器，并将滚动位置设置为容器的滚动高度
            const container = this.$refs.scrollIdRef;
            container.scrollTop = container.scrollHeight;
        },
        handleScroll() {
            const container = this.$refs.scrollIdRef;

            // 当滚动到顶部时，触发加载新数据的操作
            if (container.scrollTop === 0) {
                this.loadNewData();
            }
        },
        loadNewData() {
            const newData =
                [{
                    id: 2, name: "小黑",
                    data: this.getDate(),
                    type: 2,
                    text: 'text',
                    uid: 1004,
                }, {
                    id: 1,
                    name: "小白",
                    data: this.getDate(),
                    type: 1,
                    text: 'text222',
                    uid: 1003,
                },]

            this.arr = [...newData, ...this.arr];
        },

    }


};
</script>
  
<style lang="scss" scoped>
.chat-window {
    width: 100%;

    .chat-window-box {
        height: calc(100vh - 300px);
        overflow: auto;
    }

    .chat-li {
        margin: 10px;
        padding-top: 25px;

        .chat-head {
            margin: 0 10px;
            text-align: center;
        }

        .head-right {
            color: #A8EA7C;
        }
    }

    .bubble {
        position: relative;
        min-width: 50%;
        font-size: 22px;
        font-weight: 700;
        color: black;
        border-radius: 20px;
        height: 40px;
        line-height: 40px;

        .b-data {
            color: #999999;
            font-weight: 500;
            font-size: 12px;
            position: absolute;
            top: -30px;
        }

        .b-text {
            margin: 0 10px;
        }

    }

    .bubble-left {
        background: white;

        .b-data {
            right: 5px;
        }
    }

    .bubble-right {
        background: #A8EA7C;

        .b-data {
            left: 5px;
        }
    }

}


::-webkit-scrollbar {
    background: transparent;
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #efefef;
    border-radius: 5px;
}
</style>
  